<template>
  <div class="infinite-list-wrapper" style="overflow: auto">
    <div class="heading">主 | 题 | 广 | 场</div>
    <ul
      class="list"
      v-infinite-scroll="load"
      infinite-scroll-disabled="disabled"
    >
      <li v-for="(info, index) in infos" :key="index" class="list-item">
        <div class="item-left">
          <router-link
            :to="{ name:'talking', params: { id: info.t_id } }"
          >
            <p>{{ info.t_name }}</p>
          </router-link>
          <p>{{ info.t_content }}</p>

        </div>
        <div class="item-right">
          <img :src="info.t_img" />
        </div>
      </li>
    </ul>
    <p v-if="loading">加载中...</p>
    <p v-if="noMore">没有更多了</p>
  </div>
</template>

<script>
export default {
  name: "theme",
  data() {
    return {
      infos: [],
      count: 0,
      loading: false,
      search: "",
    };
  },
  methods: {
    load() {
      this.loading = true;
      setTimeout(() => {
        this.count += 2;
        this.loading = false;
      }, 2000);
    },
  },
  computed: {
    noMore() {
      return this.count >= 60;
    },
    disabled() {
      return this.loading || this.noMore;
    },
  },
  mounted() {
       this.$axios
        .get("/themeList.do")
        .then((response) => {
          this.infos = response.data;
          console.log(this.infos);
        })
        .catch(function (error) {
          console.log(error);
        });
  },
};
</script>

<style scoped="scoped">
ul {
  list-style: none;
}

.heading {
  text-align-last: left;
  margin: 3% 7% 0 7%;
  padding-bottom: 20px;
  font-size: 30px;
  font-weight: 800;
  border-bottom: 1px solid rgb(184, 182, 182);
  text-shadow: 5px 5px 5px #b4b4b6;
}
.list-item {
  display: flex;
  margin-bottom: 30px;
}
.item-left {
  width: 70%;
  text-align-last: left;
  margin-left: 7%;
  margin-top: 20px;
}
.item-right {
  width: 30%;
  margin-top: 20px;
  margin-right: 7%;
}
.item-right img {
  width: 55%;
  border-radius: 5%;
}
.item-left p:nth-child(1) {
  font-size: 25px;
  color: #000;
  font-weight: 600;
}
.item-left p:nth-child(2) {
  width: 97%;
  font-size: 18px;
  color: rgb(66, 66, 66);
  padding-top: 5px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  -webkit-line-clamp: 2;
}
.item-left p:nth-child(3) {
  display: flex;
}
.t1 {
  width: 83%;
  font-size: 16px;
  color: #99999c;
  padding-top: 10px;
}
.t2 {
  width: 17%;
  font-size: 16px;
  color: #99999c;
  padding-top: 10px;
}
</style>